<template>
  <div class="app-container">
        <div class="cbox">
          <el-form class="form" ref="flt" :rules="rules" label-width="10rem" size="mini">
            <el-row :gutter="15" class="row">
              <el-col :span="6">
                <el-form-item label="消息标题：">
                  <el-input   placeholder="请输入消息标题" v-model="from.Code" style="width: 100%" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="内容关键字：">
                  <el-input   placeholder="请输入内容关键字" v-model="from.CodeName" style="width: 100%" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label-width="10px">
                  <el-button @click="searchType" type="primary">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增公告</el-button>
                  <el-button size="mini" type="primary" plain @click="del('diong')">编辑公告</el-button>
                  <el-button size="mini" type="danger" plain @click="examine">删除公告</el-button>
                </el-col>
        </el-row>
        <div class="table" ref="topType">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="noTitle"  show-overflow-tooltip label="消息标题"></el-table-column>
                      <el-table-column prop="noContent"  show-overflow-tooltip label="消息内容"></el-table-column>
                      <el-table-column prop="noInsertdt"  show-overflow-tooltip label="输入时间"></el-table-column>
                      <el-table-column prop="noInsertuser"  show-overflow-tooltip label="输入员工"></el-table-column>
                      <el-table-column prop="noLstupddt"  show-overflow-tooltip label="最后修改时间"></el-table-column>
                      <el-table-column prop="noLstupduser"  show-overflow-tooltip label="最后修改员工"></el-table-column>
                      <el-table-column prop="noRemark"  show-overflow-tooltip label="备注"></el-table-column>
                  </el-table>
            </div>
        </div>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            small
            background
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>
          <!-- 弹出框 新增 编辑 查看 -->
          <el-dialog
          v-el-drag-dialog
            width="40%"
            :title='addText'
            :visible.sync="addShowA"
            v-if="addShowA"
            :close-on-click-modal="false">
                <el-form  label-width="11rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                    <el-row>
                        <el-col :span="24">
                          <el-form-item prop="noTitle" label="消息标题：">
                            <el-input maxlength="32" :disabled='disabled'  v-model="xzData.noTitle" clearable></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                          <el-form-item prop="noContent" label="消息内容：">
                            <el-input maxlength="32" :disabled='disabled' type="textarea"  v-model="xzData.noContent" clearable></el-input>
                          </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                          <el-form-item prop="noRemark" label="备注：">
                            <el-input maxlength="32" :disabled='disabled' type="textarea" v-model="xzData.noRemark" clearable></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="mini" type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                        <el-button size="mini"  @click="close">关闭</el-button>
                    </div>
          </el-dialog>
  </div>
</template>

<script>
import {
  NoticeDataList,
  addNoticeData,
  editNoticeData,
  delNoticeData
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      disabled:false,
      showpop: false,
      from:{
        Code:'',
        CodeName:'',
      },
      item:{
        item:true,
        itemA:false
      },
      maxHeight:-1,
      itemData:[],
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      xzData:{},// 传给新增 编辑弹出框的数据
      data1:[],
      data2:[],
      //表单验证 新增 编辑
      addRules:{
        noTitle:[
          { required: true, message: '请填写消息标题', trigger:'blur'}
        ],
        noContent:[
          { required: true, message: '请填写消息内容', trigger:'blur'}
        ],
      },
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
    // this.dataList()
  },
  methods:{

    // dataList() {
    //   let PageSizes=this.Pagination.pageSize.toString()
    //   let PageIndexs=this.Pagination.currentPage.toString()
    //   NoticeDataList({noTitle:this.from.Code,noContent:this.from.CodeName,PageSizes:PageSizes,PageIndexs:PageIndexs,}).then(res =>{
    //     this.DetailedData = res.data.FTKJWLHYPT
    //     this.Pagination.total=res.data.total.FTKJWLHYPT
    //   })
    // },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      NoticeDataList({
        noTitle:this.from.Code,
        noContent:this.from.CodeName,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })
    },
    //点击搜索
    searchType(){
      // this.dataList()
      this.searchList()
    },
    //新增
    add(){
      this.addText='新增公告'
      this.diong=''
      this.addShowA=true
      this.see=true
      this.disabled = false
      this.xzData = {
        noTitle:'',
        noContent:'',
        noRemark:'',
        noIsdel:'',
        noVersion:'',
      }
    },
    //编辑
    del(){
      if(Object.keys(this.itemData).length){
        // let obj = Object.assign(this.itemData)
        this.xzData = this.itemData
        this.addText='编辑公告'
        this.diong='E'
        this.addShowA=true
        this.see = true
        this.disabled = false
      }else{
        this.$alert('请选择需要编辑的数据', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },
    //删除
    examine(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('你确认要删除此数据吗？', '提示', {
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        delNoticeData({noId:this.itemData.noId}).then(res=>{
          if(res.success !== '1'){
            this.$message({
              type: 'success',
              message: '删除失败'
            })
            return
          }else{
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            // this.dataList()
            this.refreshList()
            this.close()
          }
        })
      })

    },
    //双击查看
    rowdbClick(row){
      // this.viewDetails()
      this.addText='查看公告'
      this.addShowA=true
      this.see=false
      this.xzData = row
      this.disabled = true
    },

    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editNoticeData(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message({
                  type: 'success',
                  message: '编辑失败'
                })
                return
              }else{
                this.xzData = []
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                // this.dataList()
                this.refreshList()
                this.close()
              }
            })
          }else{
            addNoticeData(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message({
                  type: 'success',
                  message: '添加失败'
                })
              }else{
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                // this.dataList()
                this.refreshList()
                this.$refs[xzData].resetFields()
              }
            })

          }
        } else {
          return false
        }
      })
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
    },
    //当前行数据
    rowClick(row){
      this.itemData = row
    }
  }
}
</script>

<style  lang="scss" scoped>
.el-select {
  width: 100%;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
